<script setup lang="ts">
import type { IWorkspace } from '@/views/Editor/core/workspaces/workspacesService'
import ContextMenu from '@/components/contextMenu'
import { useEditor } from '@/views/Editor/app'

const {
  canvas,
  workspaces,
  event,
} = useEditor()

const pages = computed(() => {
  return canvas.getPages()
})
function addOnClick() {
  workspaces.setCurrentId(workspaces.add(`${(pages.value.size + 1)}`))
  canvas.zoomToFit()
}
const workspacesData = ref<IWorkspace[]>([])
function updateWorkspaces() {
  workspacesData.value = workspaces.all().map(workspace => ({
    id: workspace.id,
    name: workspace.name,
    cover: workspace.cover,
  }))
}

updateWorkspaces()

event.on('workspaceChangeAfter', updateWorkspaces)
event.on('workspaceAddAfter', updateWorkspaces)
event.on('workspaceRemoveAfter', updateWorkspaces)

onUnmounted(() => {
  event.off('workspaceChangeAfter', updateWorkspaces)
  event.off('workspaceAddAfter', updateWorkspaces)
  event.off('workspaceRemoveAfter', updateWorkspaces)
})

function onSelect(item: IWorkspace) {
  workspaces.setCurrentId(item.id.toString())
}

function openContextMenu(e: MouseEvent, node: any) {
  e.preventDefault()
  ContextMenu.showContextMenu({
    x: e.clientX,
    y: e.clientY,
    preserveIconWidth: false,
    items: [
      {
        label: '复制',
        onClick: async () => {
          if (!node.id)
            return
          const workspace = workspaces.get(node.id.toString())
          if (!workspace)
            return
          const id = workspaces.add(`${(pages.value.size + 1)}`)
          workspaces.setCurrentId(id)
          // 循序不能变， getPageJSON必须在setCurrentId之后执行，否则要复制的页面数据可能还未保存
          const json = canvas.getPageJSON(node.id)
          canvas.reLoadFromJSON(json)
        },
      },
      {
        label: '删除',
        disabled: workspaces.size() <= 1 || node.id === workspaces.getCurrentId(),
        onClick: () => {
          if (!node.id)
            return
          workspaces.remove(node.id.toString())
        },
        // divided: true,
      },
      // {
      //     label: '重命名',
      //     onClick: () => {
      //
      //     },
      // },
    ],
  })
}
</script>

<template>
  <ALayoutFooter class="dea-footer-page">
    <div class="bg-white page-box not-select">
      <ASpace>
        <div
          v-for="(item, index) in workspacesData"
          :key="index"
          class="page-view "
          :class="{ 'page-selected': workspaces.getCurrentId() === item.id }"
          @click="onSelect(item)"
          @contextmenu.stop="openContextMenu($event, item)"
        >
          <AAvatar
            class="page-ava"
            :size="30"
            shape="square"
          >
            {{ index + 1 }}
          </AAvatar>
        </div>

        <div
          class="page-add page-view"
          @click="addOnClick"
        >
          <IconPlus size="20" />
        </div>
      </ASpace>
    </div>
  </ALayoutFooter>
</template>

<style lang="less" scoped>
@import '../../styles/layouts';

.dea-footer-page {
  background-color: #f1f2f4;
  padding: 10px 20px 10px 20px;
  height: @footerBoxHeight;
  overflow: auto;

  .page-box {
    padding: 0 5px;
    height: 100%;
    align-items: center;
    display: flex;
  }

  .page-view {
    cursor: pointer;
    border: 1px solid var(--color-neutral-4);
    border-radius: 5px;
    padding: 5px;
    height: calc(@footerBoxHeight - 30px);
    align-items: center;
    align-content: center;
    display: flex;
  }

  .page-selected {
    border-color: rgb(var(--primary-6));
  }

  .page-add {
    height: calc(@footerBoxHeight - 30px);
    width: calc(@footerBoxHeight - 30px);
    text-align: center;
    align-items: center;
    display: flex;
    align-content: center;
    justify-content: center;
  }

  .page-add:hover {
    color: rgb(var(--primary-6));
    border-color: rgb(var(--primary-6));
    cursor: pointer;
  }

  .page-ava {
    //background-color: #3370ff;
  }
}
</style>
